import { Injectable, Inject } from '../decorators/inject';
import { TableEvent } from './table-event';
import { NExcel } from '../types';
import { NCellRender } from '../types/cell-render.interface';
import { TableDatas } from './table-datas';
import { CellRenderEditManage } from './cell-render-edit-manage';
import { Hook } from './hook';
import { Config } from './config';
import { filter } from 'rxjs/operators';
import  './edit-layer.less';
import { ExecuteRecord } from './execute-record';
import { ValueCommand } from '../commands/value-command';
import { Cache } from './cache';
@Injectable('EditLayer')
export class EditLayer {
    protected activeEditor: NCellRender.AEdit = null;
    protected editorContent: HTMLElement;
    constructor(
        @Inject(NExcel.EditorContainerToken) protected containerEle: HTMLElement,
        protected tableEvent: TableEvent,
        protected datas: TableDatas,
        protected cellRenderEditManage: CellRenderEditManage,
        protected hook: Hook,
        protected conf: Config,
        protected executeRecord: ExecuteRecord,
        protected cache: Cache
    ) {

    }

    public init() {
        // this.tableEvent.doubleClick$.subscribe(event => {
        //     console.log(event)
        //     let _info = this.cache.getRangeRectInfo({row: event.row, col: event.col}, {row: event.row + event.rowspan - 1, col: event.col + event.colspan - 1});
        //     let cellInstance = this.datas.getRow(event.row).getCell(event.col);
        //     this.containerEle.style.zIndex = '1000';
        //     let editor = this.cellRenderEditManage.getEditor(cellInstance.type);
        //     if(!editor)  {
        //         console.log(`未找到type为${cellInstance.type}对应的Editor！`);
        //         return;
        //     }
        //     this.hook.afterCellRender.add(this.afterCellRender.bind(this));
        //     editor.prototype.finish = this.editorFinish.bind(this);
        //     this.activeEditor = new editor(event.row, event.col);
        //     let ratio = this.conf.pixelRatio;
        //     this.editorContent = this.initEle((_info.start.x) / ratio,(_info.start.y) / ratio,_info.w / ratio,_info.h / ratio);
        //     this.activeEditor.initDom(this.editorContent);
        //     const cell = this.datas.getRow(event.row).getCell(event.col);
        //     this.activeEditor.initEdit(cell.value, cell.type);
        // });
        // this.tableEvent.click$.pipe(filter(() => this.activeEditor != null)).subscribe(() => {
        //     this.activeEditor.blur();
        //     this.destroyEditor();
        // });
        this.hook.afterBgRender.add(() => {
            if(this.activeEditor === null || this.editorContent === null) return;
            if(this.activeEditor.row < this.conf.visibleBoundary.row || this.activeEditor.row > this.conf.visibleBoundary.endRow
                || this.activeEditor.col < this.conf.visibleBoundary.col || this.activeEditor.col > this.conf.visibleBoundary.endCol) {
                this.editorContent.style.display = 'none';
            } else {
                this.editorContent.style.display = 'inline-block';
            }
        });
    }
    protected editorFinish(editorInstance: NCellRender.AEdit,value: any, type?: string) {
        const row = this.datas.getRow(editorInstance.row);
        const cell = row.getCell(editorInstance.col);
        if(type === undefined) {
            type = cell.type;
        }
        if(cell.value === value && cell.type === type) {
            return;
        }
        let command = new ValueCommand(editorInstance.row, editorInstance.col, this.datas, value, type);
        this.executeRecord.execute(command);
        this.destroyEditor();
    }
    protected destroyEditor() {
        this.activeEditor.destroy();
        this.containerEle.style.zIndex = '200';
        if(this.editorContent) {
            this.editorContent.remove();
            this.editorContent = null;
        }
    }
    protected changeContainerPosition(x: number, y: number) {

    }
    protected initEle(x: number, y: number, w: number,h: number) {
        let ele = document.createElement('div');
        ele.setAttribute('style', `top: ${y}px;left: ${x}px;height: ${h}px;width: ${w}px;`);
        ele.setAttribute('class', 'z-table-editor-content');
        this.containerEle.append(ele);
        return ele;
    }
    protected afterCellRender(cellInfo: {row: number, col: number}, position: IPositionDetailInfo) {
        if(this.activeEditor === null || this.activeEditor.row !== cellInfo.row || this.activeEditor.col !== cellInfo.col || this.editorContent === null) {
            return;
        }
        let x = `${position.x / this.conf.pixelRatio - 1}px`;
        let y = `${(position.y / this.conf.pixelRatio) - 1}px`;
        this.editorContent.style.left = x;
        this.editorContent.style.top = y;
    }
}